<!DOCTYPE html>
<html lang="en">

<head>
    <title>实用漂亮的select下拉菜单</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
        body {
            font-size: 12px;
        }
        
        .select {
            width: 150px;
            height: 24px;
            line-height: 24px;
            position: relative;
            text-align: center;
            cursor: pointer;
            background: url(images/selectbg.jpg) right 0px no-repeat;
            color: #fff;
        }
        
        .option {
            line-height: 24px;
            width: 150px;
            position: absolute;
            top: 24px;
            left: 0px;
            display: none;
            background: #820014;
        }
        
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        ul li {
            height: 24px;
            background: #666px;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="jquery1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var selects = $("#select");
            var options = $("#option");
            var state = true;
            selects.click(function() {
                if (state) {
                    if (!($(this).is(":animated"))) {
                        options.slideDown();
                    } else {
                        options.css("display", "none");
                    }
                    state = false;
                } else {
                    if (!($(this).is(":animated"))) {
                        options.slideUp();
                    } else {
                        $(this).stop(true, true);
                        options.css("display", "");
                    }
                    state = true;
                }
            });
            selects.hover(function() {
                    $(this).css("background", "url(images/selectbg2.jpg) right 0px no-repeat");
                },
                function() {
                    $(this).css("background", "url(images/selectbg.jpg) right 0px no-repeat");
                });
            $("li").hover(function() {
                    $(this).css("background", "#990000").css("color", "#ff9900");
                },
                function() {
                    $(this).css("background", "#820014").css("color", "#fff");
                });
            $("li").click(function() {
                $(this).css("background", "#c00").css("color", "#ffffff");
                options.css("display", "none");
                selects.children("span").text($(this).attr("tip"));
                $(".valt").val($(this).attr("tip"));
                state = false;
            });
            options.click(function() {
                selects.click(function() {
                    return false;
                });
            });
        })
    </script>
</head>

<body>
    预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br> 您的选择是：
    <input type="text" class="valt" value="">
    <div class="select" id="select"><span>请选择分类</span>
        <div class="option" id="option">
            <ul>
                <li tip="推荐课程">推荐课程</li>
                <li tip="资讯中心">资讯中心</li>
                <li tip="辅导专区">辅导专区</li>
                <li tip="公职考试">公职考试</li>
                <li tip="司法考试">司法考试</li>
                <li tip="报关、报检员">报关、报检员</li>
                <li tip="高考辅导">高考辅导</li>
                <li tip="招生简章">招生简章</li>
                <li tip="招生信息">招生信息</li>
                <li tip="学员专区">学员专区</li>
                <li tip="公计培训">公计培训</li>
                <li tip="名师团队">名师团队</li>
                <li tip="辅导教材">辅导教材</li>
            </ul>
        </div>
    </div>
</body>

</html>